import { getBusinessDataApi, getOverviewDishesApi, getOverviewEmployeeApi, getOverviewOrdersApi, getOverviewSetmealsApi } from "@/api/workspace";
import { BusinessDataResult, OverviewEmployeeResult, OverviewOrdersResult, OverviewResult } from "@/types/workspace";
import { PlusOutlined, RightOutlined } from "@ant-design/icons"
import dayjs from "dayjs"

export function Component() {
  const navigate = useNavigate();
  // 今日数据
  const [dayData, setDayData] = useState<BusinessDataResult>()
  const dayDataList = [
    {
      name: '营业额',
      number: dayData?.turnover,
      prefix: '￥',
      suffix: ''
    },
    {
      name: '有效订单',
      number: dayData?.validOrderCount,
      prefix: '',
      suffix: ''
    },
    {
      name: '订单完成率',
      number: dayData?.orderCompletionRate,
      prefix: '',
      suffix: '%'
    },
    {
      name: '平均客单价',
      number: dayData?.unitPrice,
      prefix: '￥',
      suffix: ''
    },
    {
      name: '新增用户',
      number: dayData?.newUsers,
      prefix: '',
      suffix: ''
    },
  ]
  const getBusinessData = () => {
    return new Promise((resolve, reject) => {
      getBusinessDataApi()
        .then((res) => {
          setDayData(res.data)
          resolve(res.data);
        })
        .catch((e) => {
          reject(e);
        });
    });
  }
  // 订单管理
  const [orderhData, setOrderData] = useState<OverviewOrdersResult>()
  const orderManage = [
    {
      name: '待接单',
      number: orderhData?.deliveredOrders,
      color: 'color-red'
    },
    {
      name: '待派送',
      number: orderhData?.deliveredOrders,
      color: 'color-red'
    },
    {
      name: '已完成',
      number: orderhData?.completedOrders,
      color: ''
    },
    {
      name: '已取消',
      number: orderhData?.cancelledOrders,
      color: ''
    },
    {
      name: '全部订单',
      number: orderhData?.allOrders,
      color: ''
    },
  ]
  const getOverviewOrder = () => {
    return new Promise((resolve, reject) => {
      getOverviewOrdersApi()
        .then((res) => {
          setOrderData(res.data)
          resolve(res.data);
        })
        .catch((e) => {
          reject(e);
        });
    });
  }
  // 菜品总览
  const [dishData, setDishData] = useState<OverviewResult>()
  const overviewDish = [
    {
      name: '启售',
      number: dishData?.sold,
    },
    {
      name: '停售',
      number: dishData?.discontinued,
    }
  ]
  const getOverviewDish = () => {
    return new Promise((resolve, reject) => {
      getOverviewDishesApi()
        .then((res) => {
          setDishData(res.data)
          resolve(res.data);
        })
        .catch((e) => {
          reject(e);
        });
    });
  }
  // 套餐总览
  const [setmealData, setSetmealData] = useState<OverviewResult>()
  const overviewSetmeal = [
    {
      name: '启售',
      number: setmealData?.sold,
    },
    {
      name: '停售',
      number: setmealData?.discontinued,
    }
  ]
  const getOverviewSetmeal = () => {
    return new Promise((resolve, reject) => {
      getOverviewSetmealsApi()
        .then((res) => {
          setSetmealData(res.data)
          resolve(res.data);
        })
        .catch((e) => {
          reject(e);
        });
    });
  }
  // 员工管理
  const [employeeData, setEmployeeData] = useState<OverviewEmployeeResult>()
  const employeeManage = [
    {
      name: '员工总数',
      number: employeeData?.allEmployee,
      color: ''
    },
    {
      name: '新增员工',
      number: employeeData?.addEmployee,
      color: ''
    },
    {
      name: '男生比例',
      number: employeeData?.boyProportion + "%",
      color: ''
    },
    {
      name: '女生比例',
      number: employeeData?.girlProportion + "%",
      color: ''
    },
    {
      name: '启用员工',
      number: employeeData?.enableEmployee,
      color: ''
    },
  ]
  const getOverviewEmployee = () => {
    return new Promise((resolve, reject) => {
      getOverviewEmployeeApi()
        .then((res) => {
          setEmployeeData(res.data)
          resolve(res.data);
        })
        .catch((e) => {
          reject(e);
        });
    });
  }
  // 获取数据
  useEffect(() => {
    const all = [getBusinessData(), getOverviewDish(), getOverviewSetmeal(), getOverviewOrder(), getOverviewEmployee()]
    Promise.all(all)
  }, [])
  // 获取当前时间
  const nowDate = dayjs(+new Date()).format('YYYY-MM-DD')
  // 跳转到详细数据
  const toStatistics = () => {
    navigate('/statistics')
  }
  // 跳转到订单管理
  const toOrder = () => {
    navigate('/order')
  }
  // 跳转到菜品管理
  const toDish = () => {
    navigate('/dish')
  }
  // 新增菜品
  const addDish = () => {
    navigate('/dish/addDish')
  }
  // 跳转到套餐管理
  const toSetmeal = () => {
    navigate('/setmeal')
  }
  // 新增套餐
  const addSetmeal = () => {
    navigate('/setmeal/addSetmeal')
  }
  // 跳转到员工管理
  const toEmployee = () => {
    navigate('/employee')
  }
  return (
    <div className="min-w-1200px h-100% flex justify-between flex-col">
      <PageMain className="h-24% mt-0">
        <div className="mb-2 flex justify-between">
          <div>
            <span className="text-18px font-bold">今日数据</span>
            <span className="text-14px ml-2 color-#666">{nowDate}</span>
          </div>
          <div className="cursor-pointer" onClick={toStatistics}>
            <span className="text-16px mr-2 color-#666">详细数据</span>
            <RightOutlined />
          </div>
        </div>
        <div className="flex justify-between h-80%">
          {dayDataList.map((item, index) => (
            <div key={index} className="w-19% rounded bg-[#e7f3f4] dark:bg-[#252529] flex justify-around items-center flex-col">
              <div className="flex items-center">
                <span className="text-[#3c3c43bf] dark:text-white">{item.name}</span>
              </div>
              <div className="text-lg text-[#000] font-bold dark:text-white font-size-6">
                {item.prefix}{item.number}{item.suffix}
              </div>
            </div>
          ))}
        </div>
      </PageMain>

      <PageMain className="h-24%">
        <div className="mb-2 flex justify-between">
          <div>
            <span className="text-18px font-bold">订单管理</span>
            <span className="text-14px ml-2 color-#666">{nowDate}</span>
          </div>
          <div className="cursor-pointer" onClick={toOrder}>
            <span className="text-16px mr-2 color-#666">订单明细</span>
            <RightOutlined />
          </div>
        </div>
        <div className="flex justify-between h-80%">
          {orderManage.map((item, index) => (
            <div key={index} className="w-19% rounded bg-[#e7f3f4] dark:bg-[#252529] flex justify-around items-center flex-col">
              <div className="flex items-center">
                <span className="text-[#3c3c43bf] dark:text-white">{item.name}</span>
              </div>
              <div className="text-lg text-[#000] font-bold dark:text-white font-size-6">
                <span className={item.color}>{item.number}</span>
              </div>
            </div>
          ))}
        </div>
      </PageMain>

      <div className="h-24% flex justify-between">
        <PageMain className="h-100% w-49%">
          <div className="mb-2 flex justify-between">
            <div>
              <span className="text-18px font-bold">菜品总览</span>
            </div>
            <div className="cursor-pointer" onClick={toDish}>
              <span className="text-16px mr-2 color-#666">菜品管理</span>
              <RightOutlined />
            </div>
          </div>
          <div className="flex justify-between h-80%">
            {overviewDish.map((item, index) => (
              <div key={index} className="w-38% rounded bg-[#e7f3f4] dark:bg-[#252529] flex justify-around items-center flex-col">
                <div className="flex items-center">
                  <span className="text-[#3c3c43bf] dark:text-white">{item.name}</span>
                </div>
                <div className="text-lg text-[#000] font-bold dark:text-white font-size-6">
                  {item.number}
                </div>
              </div>
            ))}
            <div className="rounded w-18% bg-[#0e8b8d] dark:bg-[#252529] cursor-pointer flex justify-evenly items-center flex-col" onClick={addDish}>
              <div className="flex items-center justify-center color-#fff">
                <PlusOutlined />
              </div>
              <div className="text-lg text-[#fff] font-bold dark:text-white">
                新增菜品
              </div>
            </div>
          </div>
        </PageMain>
        <PageMain className="h-100% w-49%">
          <div className="mb-2 flex justify-between">
            <div>
              <span className="text-18px font-bold">套餐总览</span>
            </div>
            <div className="cursor-pointer" onClick={toSetmeal}>
              <span className="text-16px mr-2 color-#666">套餐管理</span>
              <RightOutlined />
            </div>
          </div>
          <div className="flex justify-between h-80%">
            {overviewSetmeal.map((item, index) => (
              <div key={index} className="w-38% rounded bg-[#e7f3f4] dark:bg-[#252529] flex justify-around items-center flex-col">
                <div className="flex items-center">
                  <span className="text-[#3c3c43bf] dark:text-white">{item.name}</span>
                </div>
                <div className="text-lg text-[#000] font-bold dark:text-white font-size-6">
                  {item.number}
                </div>
              </div>
            ))}
            <div className="rounded w-18% bg-[#0e8b8d] dark:bg-[#252529] cursor-pointer flex justify-evenly items-center flex-col" onClick={addSetmeal}>
              <div className="flex items-center justify-center color-#fff">
                <PlusOutlined />
              </div>
              <div className="text-lg text-[#fff] font-bold dark:text-white">
                新增套餐
              </div>
            </div>
          </div>
        </PageMain>
      </div>
      <PageMain className="h-24%">
        <div className="mb-2 flex justify-between">
          <div>
            <span className="text-18px font-bold">员工总览</span>
          </div>
          <div className="cursor-pointer" onClick={toEmployee}>
            <span className="text-16px mr-2 color-#666">员工管理</span>
            <RightOutlined />
          </div>
        </div>
        <div className="flex justify-between h-80%">
          {employeeManage.map((item, index) => (
            <div key={index} className="w-19% rounded bg-[#e7f3f4] dark:bg-[#252529] flex justify-around items-center flex-col">
              <div className="flex items-center">
                <span className="text-[#3c3c43bf] dark:text-white">{item.name}</span>
              </div>
              <div className="text-lg text-[#000] font-bold dark:text-white font-size-6">
                <span className={item.color}>{item.number}</span>
              </div>
            </div>
          ))}
        </div>
      </PageMain>
    </div>

  )
}
